<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}

		.daohang{
			border:1px solid #666;
			width: 120px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: #854;
			float: left;
			background-color: #1a8;
			list-style: none;
			overflow: hidden;
		}
		.yuanjiao1{
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;}
		.yuanjiao2{
			border-top-left-radius: 20px;
			border-bottom-left-radius: 20px;
		}
		.box{
			width: 800px;
			height: 790px;
			background-color: #090909;
			float: left;
		}
		
		.left{
			margin-left: 800px;
		}

		 .box ul{
			position: relative;
			left: 435px;
		}
		.box1{
			width: 784px;
			height: 790px;
			background-color: #1d978a;
		}
		span{
			display: block;
		}
		.a1{
			display: block;
			text-decoration: none;
		}
		.a2{
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;
		}
		.a3{
			border-top-left-radius: 20px;
			border-bottom-left-radius: 20px;
		}
		.jpg1{
			margin-top: 320px;
			margin-left: 250px;
			cursor: pointer;
			width: 351px;
			height: 220px;
		}
		.jpg2{
			margin-left: 900px;
			margin-top: -280px;
			cursor: pointer;
		}
		.span1{
			background-color: #999;
			
		}
		span{
			cursor: pointer;
		}
		.bg1{
			background-color: #bbc5c8;
			width: 200px;
			height: 50px;
			margin-top: -430px;
			border-bottom-right-radius: 20px;
			border-top-right-radius: 20px;
			color: #d9e6eb;
			margin-left: -1000px;
		
			
		}
		.bg2{
			width: 300px;
			height: 50px;
			background-color: #91999c;
			margin-top: 10px;
			border-bottom-right-radius: 20px;
			border-top-right-radius: 20px;
			color:#acb1b1;
			margin-left: -1000px;
			
		}
		.bg3{
			background-color: #999;
			width: 400px;
			height: 50px;
			margin-top: 10px;
			border-bottom-right-radius: 20px;
			border-top-right-radius: 20px;
			color: #ccc;
			margin-left: -1000px;
			

		}
		.bg{
			cursor: pointer; 
			font-size: 26px;
			line-height: 50px;
			text-align: center;			
		}
		.jpg3{
			margin-top:80px; 
			cursor: pointer;
			display: none;
		}
		.jpg4{
			width: 350px;
			position: absolute;
			left: 607px;
			top: 470px;
			display: none;
			cursor: pointer;
		}
		.hidden{
			overflow: hidden;
		}
		.font{
			position: absolute;
			left: 925px;
			top: 470px;
			font-size: 12px;
			cursor: pointer;
			display: none;
			height: 18px;
			width: 30px;
			line-height: 18px;
			text-align: center;
			border:1px solid #fff;
		}

		.png1{
			position:absolute;
			left: 220px;
			top: 100px;
			display: none;
		}
		.font2{
			position: relative;
			left: 520px;
			top: -440px;
			color: #fff;
			font-size: 15px;
			border: 1px solid #fff;
			width: 31px;
			height: 18px;
			cursor: pointer;
			display: none;
		}
		.img5{
			margin-left: 300px;
			margin-top:-200px;
			display: none;
			cursor: pointer;
		}
		.img6{
			margin-left: 300px;
			margin-top:-200px;
			display: none;
			cursor: pointer;
		}
		.img7{
			margin-left: 300px;
			margin-top:-200px;
			display: none;
			cursor: pointer;
		}
		.img8{
			position: relative;
			top: 80px;
			display: none;
			cursor: pointer;
		}
		.img9{
			position: relative;
			top: 80px;
			display: none;
			cursor: pointer;
		}
		}
	</style>
</head>
<body>	
	<div class="box">
		<ul>
			<li class="daohang yuanjiao2">
				<div class="vivo">
					<span class="span1">空军一号</span><a href="" class="a1 a3">Air Fly 1</a>
				</div>
			</li>
			<li class="daohang">
				<div class="vivo">
					<div></div><span class="span1">飞人乔丹</span><a href="" class="a1">Air Jordan</a>
				</div>
			</li>
			<li class="daohang">
				<div class="vivo">
					<div></div><div></div><span class="span1">耐克sb</span><a href="" class="a1">Nike SB</a>
				</div>
			</li>
			<li class="daohang">
				<div class="pp">
					<span class="sapn2">阿迪达斯 Neo</span><a href="" class="a1">Adidas Neo</a>
				</div>
			</li>
			<li class="daohang">
				<div class="qq">
					<span class="sapn2">阿迪达斯 Y-3</span><a href="" class="a1">Adidas Y-3</a>
				</div>
			</li>
			<li class="daohang yuanjiao1">
				<div class="ww">
					<span class="sapn2"> 阿迪达斯 冰风</span><a href="" class="a1 a2">Adadis boost</a>
				</div>
			</li>
		</ul>
		<div class="jpg1">
			<img src="img/i.jpg" alt="">
				<div class="yy">
					<img src="img/error.png" alt="" class="png1">
					<div class="font2">关闭</div>
				</div>
		</div>
		
		<div class="jpg2">
			<img src="img/h.jpg" alt="">
		</div>
		<div class="bg">
			<div class="bg1 "> Air Fly 1</div>
			<div class="bg2 ">Air jordan6 </div>
			<div class="bg3 ">NIKE SB </div>
		</div>
		<div class="img5"><img src="img/w.jpg" alt=""></div>
		<div class="img6"><img src="img/t.jpg" alt=""></div>
		<div class="img7"><img src="img/v.jpeg" alt=""></div>
	</div>
	<div class="left">
		<div class="box1">
				<img src="img/9.jpg" alt="" class="jpg3">
				<img src="img/10.jpg" alt="" class="jpg4">
				<div class="font">关闭</div>
				<div class="img8"><img src="img/o.jpg" alt=""></div>
				<div class="img9"><img src="img/r.jpg" alt=""></div>
		</div>
	</div>
	<script src="../JQuery/jquery-1.11.1.js"></script>
	<script>
			$("ul li").mouseover(function(){
			$(this).find("div").stop().animate({"margin-top":"-50px",},1000);
		})
		$("ul li").mouseleave(function(){
			$(this).find("div").stop().animate({"margin-top":"0px",},100);
		});
		$(".box ul>li").click(function(){
			var ind = $(this).index();
			console.log(ind);
			$(".bg>div").eq(ind).animate({"margin-left":"-30px"},400)
		});
		$(".jpg2").click(function(){
			$(".box1").find(".jpg4").fadeIn(1000);
		})
		$(".pp span").click(function(){
			$(".box1").find(".jpg3").show(1000);
		})
		$(".jpg2").click(function(){
			$(".box1").find(".font").fadeIn(1000);
		})
		$(".font").click(function(){
			$("img.jpg4").fadeOut(1000)
		})
		$(".font").click(function(){
			$(".font").fadeOut(1000)
		});
		$(".jpg1").click(function(){
		$(".png1").show(1000);
		});
		 $(".jpg1").click(function(){
		 	$(".font2").fadeIn(5000);
		 });
			$(".font2").click(function(){
			$(".font2").css("left","-1000px",2000)
		});
		$(".font2").click(function(){
			$("div  .png1").css("left","-1000px",2000)
		});
		$(".bg1 ").click(function(){
			$(".img5").fadeIn(300)
		})
		$(".img5").click(function(){
			$(".img5").fadeOut(100)
		})
		$(".bg2 ").click(function(){
			$(".img6").fadeIn(300)
		})
		$(".img6").click(function(){
			$(".img6").fadeOut(100)
		})
		$(".bg2").click(function(){
			$(".img5").hide(100)
		})
		$(".bg1").click(function(){
			$(".img6").hide(100)
		})
		$(".bg3").click(function(){
			$(".img7").fadeIn(300)
		})
		$(".img7 ").click(function(){
			$(".img7").fadeOut(100)
		})
		$(".bg1").click(function(){
			$(".img7").hide(100)
		})
		$(".bg2").click(function(){
			$(".img7").hide(100)
		})
		$(".bg3").click(function(){
			$(".img6").hide(100)
		})
		$(".bg3").click(function(){
			$(".img5").stop().hide(100)
		})
		$(".qq span").click(function(){
			$(".img8").stop().show(1000)
		})
		$(".pp span").click(function(){
			$(".img8").stop().hide(1000)
		})
		$(".qq span").click(function(){
			$(".jpg3").stop().hide(1000)
		})
		$(".qq span").click(function(){
			$(".img9").stop().hide(100)
		})
		$(".ww span").click(function(){
			$(".img9").stop().show(1000)
		})
		$(".ww span").click(function(){
			$(".jpg3").stop().hide(100)
		})
		$(".ww span").click(function(){
			$(".img8").stop().hide(100)
		})
		$(".pp span").click(function(){
			$(".img9").stop().hide(100)
		})
	</script>
</body>
</html>